import  { View } from '@tarojs/components'
import { useState } from 'react';
import { Card, CheckboxInput, DatePicker, Form, PrimaryButton, TextArea, TextInput } from '@/ui-components';
import to from 'await-to-js';
import Taro from '@tarojs/taro';
import { Dialog } from '@/utils';
import { TreasuryCheckinCreateParams, createTreasuryCheckin } from '../../network'
import './index.scss'


type TreasuryCheckinState = Partial<TreasuryCheckinCreateParams>

const onNext = async (treasuryCheckin: TreasuryCheckinState) => {

  const [err] = await to(createTreasuryCheckin(treasuryCheckin as TreasuryCheckinCreateParams))
  if (err) {
    Taro.showToast({ title: err.message || '签到确认失败，请稍后再试', icon: 'error' })
  } else {
    Taro.showToast({ title: '签到确认成功', icon: 'success' })
    Taro.navigateBack()
  }
}

const onValidate = (treasuryCheckin: TreasuryCheckinState) => {
  const treasuryId = Number(Taro.getCurrentInstance().router?.params.treasuryId)
  if (treasuryId === undefined) {
    Taro.showToast({ title: '宝库信息为空', icon: 'error' })
    return
  }
  treasuryCheckin.treasuryId = treasuryId
  if (treasuryCheckin.enabled === undefined) {
    Taro.showToast({ title: '请选择是否开启签到', icon: 'error' })
    return
  }
  if (!treasuryCheckin.enabled) {
    Dialog.confirm({ content: '是否确认关闭签到?', onConfirm: () => onNext(treasuryCheckin) })
    return
  }
  if (!treasuryCheckin.awardScore || !Number.isInteger(Number(treasuryCheckin.awardScore))) {
    Taro.showToast({ title: '请输入签到奖励积分', icon: 'error' })
    return
  }
  if (!treasuryCheckin.startTime) {
    Taro.showToast({ title: '请选择开始日期', icon: 'error' })
    return
  }
  if (!treasuryCheckin.endTime) {
    Taro.showToast({ title: '请选择结束日期', icon: 'error' })
    return
  }
  if (!treasuryCheckin.title) {
    Taro.showToast({ title: '请输入签到提示', icon: 'error' })
    return
  }
  if (treasuryCheckin.continuousEnabled === undefined) {
    Taro.showToast({ title: '请选择是否开启连续签到', icon: 'error' })
    return
  }
  if (!treasuryCheckin.continuousEnabled) {
    Dialog.confirm({ content: '是否确认关闭连续签到?', onConfirm: () => onNext(treasuryCheckin) })
    return
  }
  if (!treasuryCheckin.continuousDays || !Number.isInteger(Number(treasuryCheckin.continuousDays))) {
    Taro.showToast({ title: '请输入连续签到天数', icon: 'error' })
    return
  }
  if (!treasuryCheckin.continuousAwardScore || !Number.isInteger(Number(treasuryCheckin.continuousAwardScore))) {
    Taro.showToast({ title: '请输入连续签到奖励积分', icon: 'error' })
    return
  }
  onNext(treasuryCheckin)
}

export default function TreasuryCheckinCreateScene() {
  const [ treasuryCheckin, setTreasuryCheckin ] = useState<TreasuryCheckinState>({})

  return (
    <View className='treasury-checkin-create-scene safe-bottom'>
      <Card>
        <Form>
          <CheckboxInput
            label='签到开启'
            value={treasuryCheckin.enabled}
            options={[
              { name: '是', value: true },
              { name: '否', value: false }
            ]}
            onChange={enabled => {setTreasuryCheckin({ ...treasuryCheckin, enabled })}}
          />
          {
            treasuryCheckin.enabled && <>
              <TextInput
                label='签到奖励'
                placeholder='请输入签到奖励积分'
                value={String(treasuryCheckin.awardScore || '')}
                type='number'
                onChange={awardScore => {setTreasuryCheckin({ ...treasuryCheckin, awardScore: Number.parseFloat(awardScore) })}}
              />
              <DatePicker
                label='开始日期'
                placeholder='请选择签到开始日期'
                value={treasuryCheckin.startTime}
                onChange={startTime => {setTreasuryCheckin({ ...treasuryCheckin, startTime })}}
              />
              <DatePicker
                label='结束日期'
                placeholder='请选择签到结束日期'
                value={treasuryCheckin.endTime}
                onChange={endTime => {setTreasuryCheckin({ ...treasuryCheckin, endTime })}}
              />
              <TextArea
                label='签到提示'
                placeholder='请输入签到提示'
                value={treasuryCheckin.title}
                onChange={title => {setTreasuryCheckin({ ...treasuryCheckin, title })}}
              />
            </>
          }
        </Form>
      </Card>
      {
        treasuryCheckin.enabled && <Card>
          <Form>
            <CheckboxInput
              label='连续签到'
              value={treasuryCheckin.continuousEnabled}
              options={[
                { name: '是', value: true },
                { name: '否', value: false }
              ]}
              onChange={continuousEnabled => {setTreasuryCheckin({ ...treasuryCheckin, continuousEnabled })}}
            />
            {
              treasuryCheckin.continuousEnabled && <>
                <TextInput
                  label='签到天数'
                  placeholder='请输入连续签到天数'
                  value={String(treasuryCheckin.continuousDays || '')}
                  type='number'
                  onChange={continuousDays => {setTreasuryCheckin({ ...treasuryCheckin, continuousDays: Number.parseFloat(continuousDays) })}}
                />
                <TextInput
                  label='奖励积分'
                  placeholder='请输入连续签到奖励'
                  value={String(treasuryCheckin.continuousAwardScore || '')}
                  type='number'
                  onChange={continuousAwardScore => {setTreasuryCheckin({ ...treasuryCheckin, continuousAwardScore: Number.parseFloat(continuousAwardScore) })}}
                />
              </>
            }
          </Form>
        </Card>
      }
      <PrimaryButton
        text='确认'
        onClick={() => onValidate(treasuryCheckin)}
      />
    </View>
  )
}
